<template>
    <div>
        <!--网页内容-->
        <div class='container'>
            <div class='proDetail'>
                <img v-bind:src="getCoverUrl(coverImg_url)">
                <div class='proText'>
                    <h2>{{title}}</h2>
                    <p class='starNum'>评分：<span>{{allstar}}</span></p>
                    <h3>{{author}}</h3>
                    <p class='like'>
                        <a href="javascript:" class="icon liIcon"></a><span>{{likes}}</span></p>
                    <p class='sign'>
                        <a href="javascript:" class="icon siIcon"></a><span>{{sign}}</span></p>

                    <div class='likeBtn inClick' @click="addlike">
                        <a class="icon liBtn"></a><span>点赞</span></div>
                    <div class='star'>

                        <span>打分</span>
                        <ul>
                            <li v-for='stars in 5' @click="addstars(stars)"><a href="javascript:;">{{stars}}</a></li>
                            <!--<li><a href="javascript:;">2</a></li>
                            <li><a href="javascript:;">3</a></li>
                            <li><a href="javascript:;">4</a></li>
                            <li><a href="javascript:;">5</a></li>-->
                        </ul>

                    </div>
                    <p class='subTime'>提交时间：<span>{{new Date(submit_time).toLocaleString()}}</span></p>
                </div>
            </div>

            <!-- 图片展示区 -->
            <div class='showImg'>
                <div class='imgBtn leftBtn'><img src='../../../static/img/leftBtn.png'></div>

                <div class='img'>
                    <div class="scroll_list">
                        <ul>
                            <li v-for="item in img_url"><img class="EnlargePhoto" v-bind:src="getCoverUrl(item)" alt=""></li>
                            <li style="display: none"></li>
                            <li style="display: none"></li>
                            <li style="display: none"></li>
                            <li style="display: none"></li>
                        </ul>
                    </div>
                </div>

                <div class='imgBtn rightBtn'><img src='../../../static/img/rightBtn.png'></div>
            </div>

            <!-- 视频展示区 -->
            <div class='showVideo' v-show='isVideoShow'>
                <video class='video' width="1000" height="500" controls v-bind:src="getCoverUrl(video_url)">
                    <source type="video/mp4"> 您的浏览器不支持 video 标签。
                </video>
            </div>

            <!-- 作品介绍区 -->
            <div class='showText'>
                <span>作品介绍</span>
                <p>{{intro}}
                </p>
            </div>

            <!-- 评论区 -->
            <div class='comment'>
                <div class="textarea">
                    <p>
                        <span class="lspan">我有话说......</span>
                        <span class="rspan">一共有<span style="color:red;">{{comments.length}}</span>条评论</span>
                    </p>
                    <input type="hidden" value="25" name="cid" />
                    <textarea placeholder="请输入评论内容...." name="content" id="content" v-model="comment"></textarea>
                    <input type="button" value="发布" name="comment" class="button" @click="addComment">
                </div>
                <div class="list" id="comment">
                    <h4>最新评论</h4>
                    <ul id="comlist">

                        <li id="comment120" v-for="(item, index) in comments" :key="index">
                            <dl>
                                <dt>
                                    <a href="" target="_blank"> </a>
                                </dt>

                                <dd class="username">
                                    <a href="" target="_blank">
										{{item.name}}							
									</a>
                                </dd>

                                <dd class="con">{{item.content}}</dd>

                                <dd class="tool">
                                    <span class="time">{{new Date(item.comment_time).toLocaleString()}}</span>
                                    <p class="tool">

                                        <!-- <a href="##" title="赞同" class="agree" id="120" cid="25">赞同(<span style="color:red;">0</span>)</a>
										<span href="##" title="已赞同" class="or">已赞同(<span style="color:red;">0</span>)</span> -->

                                    </p>
                                </dd>
                                <div id="clearfix"></div>
                            </dl>
                            <!-- 回复框 -->
                            <div class="textarea reply">
                                <p>
                                    <span>回复 <span style="color:red;font-size:15px;">温叶</span></span>
                                </p>
                                <input type="hidden" value="25" name="cid" />
                                <input type="hidden" value="11" name="tid" />
                                <input type="hidden" value="温叶" name="tusername" />
                                <textarea placeholder="请输入回复内容...." name="recontent"></textarea>
                                <input type="button" value="评论" name="recomment" class="button combtn">
                            </div>
                        </li>






                        <div id="page">
                            <p> 共{{comments.length}}条数据 共1页 </p>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class='hideD'></div>
    </div>





</template>

<script>
    import $ from "jquery";

    export default {
        name: 'app',
        created() {
            require('../../assets/js/detail.js')($);
            // console.log(this.$route.query._id)
            this.$store.dispatch({
                type: "getAndDelMethod",
                method: "get",
                url: '/api/pro/' + this.$route.query._id,
                callback: (result) => {
                    this.title = result.body.data.title;
                    this.author = result.body.data.author;
                    this.intro = result.body.data.intro;
                    this.coverImg_url = result.body.data.coverImg_url;
                    this.img_url = result.body.data.img_url;
                    this.video_url = result.body.data.video_url;
                    this.comments = result.body.data.comment;
                    this.submit_time = result.body.data.submit_time;
                    this.likes = result.body.data.likes.length;
                    this.stars = result.body.data.stars;
                    this.sign = result.body.data.sign;
                    this.$store.dispatch({
                        type: "httpMethod",
                        method: "patch",
                        url: '/api/pro/' + this.$route.query._id,
                        data: {
                            sign: this.sign + 1,
                        },
                        callback: (result) => {
                            // console.log(result)
                        }
                    })
                }
            })

        },
        data() {
            return {
                title: "",
                author: "",
                intro: "",
                coverImg_url: "",
                img_url: [],
                video_url: "",
                comment: "",
                comments: [],
                videoShow: false,
                submit_time: '',
                likes: 0,
                sign: "",
                stars:[]
            }
        },
        computed: {
            isVideoShow() {
                // console.log(this.video_url);
                if (this.video_url !== '') {
                    this.videoShow = true;
                }
                return this.videoShow;
            },
            allstar() {
                console.log(this.stars)
                let sum = 0;
                for (let i = 0; i < this.stars.length; i++) {
                    sum = sum + this.stars[i].count;
                }
                return Math.ceil(sum / this.stars.length)?Math.ceil(sum / this.stars.length):0;
            },
        },
        methods: {

            getCoverUrl(data) {
                return this.$store.state.ip + data;
            },
            addComment() {
                if (!this.$store.state.userInfo) {
                    alert('请先登录');
                    return;
                }
                // console.log(this.comment)
                if (this.comment.length > 0) {
                    this.$store.dispatch({
                        type: "httpMethod",
                        method: "patch",
                        data: {
                            uid: this.$store.state.userInfo._id,
                            name: this.$store.state.userInfo.name,
                            content: this.comment
                        },
                        url: '/pro/addComment/' + this.$route.query._id,
                        callback: (result) => {
                            if (result.body.status == 'ok') {
                                this.comments = result.body.data;
                                this.comment = '';
                            }
                            else {
                                alert('评论失败')
                            }

                        }
                    })
                } else {
                    alert('内容不能为空，请输入内容');
                }
            },
            addlike() {
                if (!this.$store.state.userInfo) {
                    alert('请先登录');
                    return;
                }
                this.$store.dispatch({
                    type: "httpMethod",
                    method: "patch",
                    data: {
                        uid: this.$store.state.userInfo._id,
                    },
                    url: '/pro/addLike/' + this.$route.query._id,
                    callback: (result) => {
                        if (result.status == 200) {
                            this.likes += 1;
                            // console.log(result);
                            return;
                        }
                        if (result.status == 202) {
                            alert('你已不能再次点赞');
                        }
                    }
                })
            },
            addstars(stars) {
                if (!this.$store.state.userInfo) {
                    alert('请先登录');
                    return;
                }

                this.$store.dispatch({
                    type: "httpMethod",
                    method: "patch",
                    data: {
                        uid: this.$store.state.userInfo._id,
                        count: stars,
                    },
                    url: '/pro/addStar/' + this.$route.query._id,
                    callback: (result) => {
                        // console.log(result);
                        if (result.status == 200) {
                            this.stars=result.body.data;
                            return;
                        }
                        if (result.status == 202) {
                            alert('你已不能再次评分');
                        }
                    }
                })
            }
        }
    }

</script>



<style scoped>
    @import '../../assets/css/detail.css';
</style>